<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style type="text/css">


        .imgBox{
            border-top: 2px solid cadetblue;
            width: 1100px;
            height: 550px;
            margin: 0 auto;
            float: left;
            position: relative;
        }

        .imgBox img{
            width: 85%;
            height: 100%;
            margin: 0 auto;
            padding-top: 30px;
            left: 0;
            top:0;
        }

        .img1{
            display: block;
        }

        .img2{
            display: none;
        }

        .img3{
            display: none;
        }

    </style>
</head>
<body>
<div class="imgBox">
    <img class="img-slide img1" src="../img/ruzhi.jpg" alt="1">
    <img class="img-slide img2" src="../img/women.jpg" alt="2">
    <img class="img-slide img3" src="../img/parents.jpg" alt="3">
</div>

</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">
    var index=0;
    //改变图片
    function ChangeImg() {
        index++;
        var a=document.getElementsByClassName("img-slide");
        if(index>=a.length) index=0;
        for(var i=0;i<a.length;i++){
            a[i].style.display='none';
        }
        a[index].style.display='block';
    }
    //设置定时器，每隔两秒切换一张图片
    setInterval(ChangeImg,5000);
</script>



</html>